<template>
  <a-modal
    title="查看设备详情"
    :width="1000"
    :visible="visible"
    :footer="null"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24" :style="{ marginBottom: '36px' }">
          <a-col :span="12">
            <label class="labeltitle">设备名称: </label> 
            <span class="item-content">{{ details.node }}</span>
          </a-col>
          <a-col :span="12">
            <label class="labeltitle">设备地址: </label> 
            <span class="item-content">{{ details.node_alias }}</span>
          </a-col>  
        </a-row>
        <a-row :gutter="24" :style="{ marginBottom: '36px' }">
          <a-col :span="12">
            <label class="labeltitle">设备类型: </label> 
            <span class="item-content">{{ details.dev_type }}</span>
          </a-col>
          <a-col :span="12">
            <label class="labeltitle">设备型号: </label> 
            <span class="item-content">{{ details.dev_model }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" :style="{ marginBottom: '36px' }">
          <a-col :span="12">
            <label class="labeltitle">序列编号: </label> 
            <span class="item-content">{{ details.dev_sn }}</span>
          </a-col>
          <a-col :span="12">
            <label class="labeltitle">设备厂商: </label> 
            <span class="item-content">{{ details.dev_vendor }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" :style="{ marginBottom: '36px' }">
          <a-col :span="12">
            <label class="labeltitle">设备标签: </label> 
            <span class="item-content">{{ details.dev_tag }}</span>
          </a-col>
          <a-col :span="12">
            <label class="labeltitle">功能描述: </label> 
            <span class="item-content">{{ details.dev_func }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" :style="{ marginBottom: '36px' }">
          <a-col :span="12">
            <label class="labeltitle">机架位置: </label> 
            <span class="item-content">{{ details.rack }} ({{ details.rack_u }})</span>
          </a-col>
          <a-col :span="12">
            <label class="labeltitle">数据中心: </label> 
            <span class="item-content">{{ details.location }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" :style="{ marginBottom: '36px' }">
          <a-col :span="12">
            <label class="labeltitle">所属平台: </label> 
            <span class="item-content">{{ details.pcs_name }}</span>
          </a-col>
          <a-col :span="12">
            <label class="labeltitle">组织部门: </label> 
            <span class="item-content">{{ details.org_name }}</span>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  name: 'DevViewModal',

  data () {
    return {
      confirmLoading: false,
      visible: false,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      
      details: {},

      form: this.$form.createForm(this)
    }
  },

  methods: {
    init (record) {
      this.details = Object.assign({}, record)
      this.visible = true
    },

    handleCancel () {
      this.visible = false
    }
  }
}
</script>
